透過 x-data 宣告一個 Alpine 元件後就可以來操作裡面的內容啦！今天會大略介紹一些比較常用的屬性，也都跟 Vue 非常相似！

常用屬性

x-show

就像 Vue 的 v-show。渲染時都會把元素渲染出來，但預設為 hidden。

<div x-show="open">
    Dropdown Contents...
</div>

x-if

與 x-show 不同的地方就是他是透過增減 DOM 的方式在操控顯示的畫面，因此只建議用在 <template> 標籤上。

<template x-if="open">
    <div>Contents...</div>
</template>

x-for

就跟 Vue 及 Laravel @foreach 的使用方式差不多。

<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
    <template x-for="color in colors">
        <li x-text="color"></li>
    </template>
</ul>

有兩點需要注意：

1. x-for 只能宣告在 <template> 中。
2. <template> 裡面只能有一個子元素。

別忘了加上 Key

在 Livewire 的子元件單元中也有提過，沒有 key 的話程式會沒辦法追蹤該 DOM，容易導致資料變動時頁面發生無法預期的錯誤。

注意：與 Vue 及 Livewire 不同的地方是 key 是寫在 <template> 上！

<ul x-data="{ colors: [
    { id: 1, label: 'Red' },
    { id: 2, label: 'Orange' },
    { id: 3, label: 'Yellow' },
]}">
    <template x-for="color in colors" :key="color.id">
        <li x-text="color.label"></li>
    </template>
</ul>

如果需要 Index

就是 JS 的用法，雖然會跟原本 PHP 的 foreach...as 有些相反

<template x-for="(color, index) in colors">
    <li>
        <span x-text="index + ': '"></span>
        <span x-text="color"></span>
    </li>
</template>

單純的迭代

如果只是需要單純重複 n 次，Alpine 也有提供這種功能：

<ul>
    <template x-for="i in 10">
        <li x-text="i"></li>
    </template>
</ul>

x-bind

可以綁定各種 HTML 的屬性，比較常用會用於綁定 class、style 等等，或像是這樣：

<div x-data="{ placeholder: 'Type here...' }">
  <input type="text" x-bind:placeholder="placeholder">
</div>

當然在 Vue 中我們知道 v-bind:class 其實可以縮寫成 :class，這在 Alpine 中也是一樣的：

<div :class="{ 'hidden': ! show }">

<div :style="{ color: 'red', display: 'flex' }">

x-text

非常單純，就是把值塞入該 HTML 元素中的 text。

<div x-data="{ username: 'calebporzio' }">
    Username: <strong x-text="username"></strong>
</div>

x-html

與上面的不同是在於，x-html 是透過 innerHTML 來產出資料。因此可以呈現出帶有 HTML標籤的字串。

‼️嚴重注意‼️：動態渲染出來的 HTML 很容易造成 XSS 漏洞。此功能應僅慎使用，像是只讓網站管理員填入的資料才能夠過 x-html 印出等等。

<div x-data="{ username: '<strong>calebporzio</strong>' }">
    Username: <span x-html="username"></span>
</div>

x-transition

簡單易用的過場動畫，若要搭配 CSS 可以詳見文件。

註： 如果沒效果請更新 AlpineJS 的版本

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle</button>
 
    <span x-show="open" x-transition>
        Hello ?
    </span>
</div>

x-effect

在每次被渲染時都會自動觸發，很方便來對元件的內容進行除錯！

<div x-data="{ label: 'Hello' }" x-effect="console.log(label)">
    <button @click="label += ' World!'">Change Message</button>
</div>

這邊點擊兩次按鈕，會讓 console 會印出

Hello
Hello World!
Hello World! World!

x-ignore

如果某個區塊不想要被 AlpineJS 所影響，但又包在 x-data 中。就可以加上 x-igonre 這樣渲染後該區塊就會無視掉 x-data ，當然底下所以的 AlpineJS 的操作都無法使用了。

<div x-data="{ label: 'From Alpine' }">
    <div x-ignore>
        <span x-text="label"></span>
    </div>
</div>

此範例將不會印出任何東西，因為 x-data 無效後底下的 x-text 自然就無效了。

x-ref

看起跟 Vue 有些為不一樣，但功能是一樣的。做到目前為止，無論是 Livewire 還是 AlpineJS 都沒有直接對 DOM 去做操作，但偶爾極少情況下還是要手動去更動 DOM 的話就可以用這個功能啦！

原本 Vue 是直接在目標元素上加上 ref="someElement" 這邊就要變成 x-ref="someElement"。之後透過 $refs.someElement 就可以直接對該元素做想做的事囉！

<button @click="$refs.text.remove()">Remove Text</button>
 
<span x-ref="text">Hello ?</span>

更多內容可以翻閱 AlpineJS文件

不過還有一個 x-model 還沒講，因為內容較多就留到明天吧 XD